iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Modern Web

CSS大全閱讀筆記系列 第 7

第二章:選擇器(5)

  • 分享至 

  • xImage
  •  

(接上篇的結合類虛擬類別部分)


  1. 虛擬類別選擇器:
    c. 結合類虛擬類別:
    - 選擇每間隔N個元素:nth-child(an±b)可以從從頭選擇每間隔N個元素套用樣式表,a為任意數,b可為零,但a、b須為整數,因此nth-child(2n)會出現偶數項元素,nth-child(2n±b)則會出現奇數項,此外,an±b也可用even或odd取代,用nth-child(even)選取偶數項,nth-child(odd)選擇奇數項,但不可以寫成nth-child(2n+-b)nth-last-child(an±b)則如其名,從後選擇每間隔N個元素套用樣式表,使用方式同nth-child(an±b)
    - 每隔N個項目選擇相同類型的元素:每隔N個項目,:nth-of-type(an±b)從頭選擇相同類別的兄弟元素,:nth-last-of-type(an±b)由後往前選擇相同類別的兄弟元素,an±b一樣可以用even或odd代替,其餘用法詳見前篇的:only-child
    d. 動態虛擬類別:
    - 動態虛擬類別可以對任何元素套用,但因為會在觸發條件下才執行,所以可能導致版面重新排列。
    - 動態虛擬類別建議以:link->:visited->:focus->:hover->:active的順序設定,但也有可以忽略的時候(後面章節會說明)。
    - 超連結虛擬類別:分成兩種,:link表示任何擁有href屬性且未曾造訪的連結錨點(但實際上針對所有超連結樣式),:visited表示已造訪過連結的錨點,另外因為隱私問題,:visited只能設定顏色相關的屬性(color、background-color、column-rule-color、outline-color、border-color及個框線如border-top-color等顏色屬性),其他屬性都會無效。
    - 使用者操作虛擬類別:分為三種,:focus指向當前處於輸入焦點的元素,可接受鍵盤輸入或其他方式觸發;:hover指向位於滑鼠指標下的元素,例如滑鼠指標下超連結;:active則是指向正在被觸發的元素,如果在超連結按下滑鼠不放時的元素就屬於此類。可以使用:active的元素有連結、按鈕、選擇項目和其他擁有tabindex的元素。

(動態虛擬類別結束,虛擬類別選擇器未完)


上一篇
第二章:選擇器(4)
下一篇
第二章:選擇器(6)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言